<template>
  <div class="box">
    <!-- <h4 ref="定位">hahah</h4>
    <h4 ref="最近">hahah</h4>
    <h4 ref="热门">hahah</h4>-->
    <div class="top">
      <div class="ding">
        <h4 ref="定位">定位城市</h4>
        <p>
          <span class="ding-span">定位失败，请点击重试</span>
        </p>
      </div>
      <div class="zui">
        <h4 ref="最近">最近访问城市</h4>
        <p>
          <span v-for="(item,index) in listCity" :key="index" @click="add(item);go(item)">{{item}}</span>
          <!-- <span>北京</span>
          <span>重庆</span> -->
        </p>
      </div>
      <div class="hot">
        <h4 ref="热门">热门城市</h4>
        <p>
          <span @click="add('上海');go('上海')">上海</span>
          <span @click="add('北京');go('北京')">北京</span>
          <span @click="add('广州');go('广州')">广州</span>
          <span @click="add('深圳');go('深圳')">深圳</span>
          <span @click="add('武汉');go('武汉')">武汉</span>
          <span @click="add('天津');go('天津')">天津</span>
          <span @click="add('西安');go('西安')">西安</span>
          <span @click="add('南京');go('南京')">南京</span>
          <span @click="add('杭州');go('杭州')">杭州</span>
          <span @click="add('成都');go('成都')">成都</span>
          <span @click="add('重庆');go('重庆')">重庆</span>
        </p>
      </div>
    </div>
    <ol class="ol">
      <li v-for="(item,index) in zm" :key="index" @click="fn(item)">{{item}}</li>
    </ol>
    <ul v-for="(item,index) in list" :key="index">
      <h4 :ref="item.s" v-if="index===0 || index !==0 && item.s !== list[index-1].s">{{item.s}}</h4>
      <li>
        <span @click="add(item.name);go(item.name)">{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapMutations,mapState,mapActions} from "vuex"
export default {
  data() {
    return {
      list: [],
      zm: [],
      change: "",
      flag: false
    }
  },
  // 组件内的导航守卫只对动态组件才能触发
  // berforeRouteEnter(to,from,next){
  //   console.log(to)
  // },
  // beforeRouteUpdate(to,from,next){
  //       console.log(to,from,next)
        
  // },
  mounted() {
    console.log(this.$route.path)
    if (this.$route.path === '/city') {
      $('.navBar').hide()
    }
    else {
      $('.navBar').show()
    }
  },
  computed:{
     listCity(){
       return JSON.parse(localStorage.getItem('list'))
     }
    // ...mapState(['city','listCity'])
  },
  methods: {
    ...mapMutations(['add']),
    fn(s) {
      // console.log(s);
      // console.log(this.$refs);
      // console.log(this.$refs[s]);
      if (s === "热门" || s === "最近" || s === "定位") {
        var s = this.$refs[s].offsetTop;
        document.documentElement.scrollTop = s;
        document.body.scrollTop = s;
      } else {
        var s = this.$refs[s][0].offsetTop;
        document.documentElement.scrollTop = s;
        document.body.scrollTop = s;
      }
    },
    go(c){
      var s = localStorage.getItem('path')
      console.log(s)
      this.$router.push({path:s,query:{name:c}})
    }
  },
  created() {
    this.$axios
      .get("/gateway", {
        params: {
          k: new Date().getTime()
        },
        headers: {
          "X-Client-Info": `{"a":"3000","ch":"1002","v":"5.0.4","e":"15649873852594160246936"}`,
          "X-Host": "mall.film-ticket.city.list"
        }
      })
      .then(resp => {
        // console.log(resp.data.data.cities)
        this.list = resp.data.data.cities
          .sort((a, b) => {
            return a.pinyin.localeCompare(b.pinyin);
          })
          .map(item => {
            return {
              s: item.pinyin[0].toUpperCase(),
              name: item.name
            };
          });
        // console.log(this.list)
        var set = new Set();
        this.list.forEach(item => {
          set.add(item.s);
        });
        // console.log(set,111)
        this.zm = ["定位", "最近", "热门", ...set];
        // console.log(this.zm)
      });
  }
};
</script>
<style lang="scss" scoped>
.box {
  background-color: #ebebeb;
  box-sizing: border-box;
  padding-right: 0.3rem;
  .top {
    .ding {
      h4 {
        background-color: #ebebeb;
        padding-left: 0.5rem;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
      }
      p {
        min-height: 1.28rem;
        padding-bottom: 0.16rem;
        padding-right: 0.6rem;
        background-color: #f5f5f5;
        .ding-span {
          padding: 0 0.08rem;
          border: 0.02rem solid #e6e6e6;
          border-radius: 0.06rem;
          line-height: 0.66rem;
          height: 0.66rem;
          text-align: center;
          margin-left: 0.3rem;
          padding: 0 0.4rem;
          font-size: 0.28rem;
          margin-top: 0.3rem;
          margin-left: 4%;
          float: left;
          background: #fff;
          min-width: 29%;
          border: 1px solid #e6e6e6;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .zui {
      h4 {
        background-color: #ebebeb;
        padding-left: 0.5rem;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
      }
      p {
        min-height: 1.28rem;
        padding-bottom: 0.16rem;
        padding-right: 0.6rem;
        background-color: #f5f5f5;
        span {
          display: inline-block;
          background: #fff;
          padding: 0 4px;
          border: 0.02rem solid #e6e6e6;
          border-radius: 0.06rem;
          line-height: 0.66rem;
          height: 0.66rem;
          text-align: center;
          margin-left: 0.3rem;
          width: 26%;
          // padding: 0 0.4rem;
          font-size: 0.28rem;
          margin-top: 0.3rem;
          margin-left: 4%;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
      }
    }
    .hot{
       h4 {
        background-color: #ebebeb;
        padding-left: 0.5rem;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
      }
      p {
        min-height: 1.28rem;
        padding-bottom: 0.16rem;
        padding-right: 0.6rem;
        background-color: #f5f5f5;
        span {
          display: inline-block;
          background: #fff;
          padding: 0 4px;
          border: 0.02rem solid #e6e6e6;
          border-radius: 0.06rem;
          line-height: 0.66rem;
          height: 0.66rem;
          text-align: center;
          margin-left: 0.3rem;
          width: 26%;
          // padding: 0 0.4rem;
          font-size: 0.28rem;
          margin-top: 0.3rem;
          margin-left: 4%;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
      }
    }
  }
  .ol {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    li {
      text-align: center;
      padding-left: 0.1rem;
      font-size: 0.28rem;
      margin-bottom: 0.08rem;
      color: #333;
    }
  }
  ul {
    h4 {
      background-color: #ebebeb;
      padding-left: 0.5rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.36rem;
    }
    li {
      background-color: #f5f5f5;
      padding-right: 0.6rem;
      span {
        font-size: 0.3rem;
        display: block;
        height: 0.88rem;
        line-height: 0.88rem;
        margin-left: 0.3rem;
        border-bottom: 0.02rem solid #c8c7cc;
      }
    }
    // padding-left:0 .3rem;
    // padding-right: 0.6rem;
    // background-color: #f5f5f5;
    // li{
    //   border-bottom: 0.2rem solid #c8c7cc;
    //   h4 {
    //   background-color: #eee;
    //   padding-left: 0.5rem;
    //   height: 0.6rem;
    //   line-height: 0.6rem;
    // }
    // }
  }
}
</style>

